<script setup>
const features = [
  {routeName: 'GenerateKey', title: '生成密钥'},
  {routeName: 'UpdateCourseSchedule', title: '查看/修改课程表'},
  {routeName: 'ViewRota', title: '查看值班表'},
  {routeName: 'ManageRota', title: '管理值班表'},
];
</script>

<template>
  <div class="home-page">
    <!-- 标题区域 -->
    <header class="welcome-header">
      <h1 style="font-size: 40px">欢迎使用逐雁排程</h1>
      <p class="welcome-subtitle">在这里您可以高效地完整办公室值班的排值班表工作</p>
    </header>

    <!-- 功能选择区域 -->
    <section class="feature-selector">
      <ul class="feature-list">
        <li class="feature-item" v-for="(feature, index) in features" :key="index">
            <router-link :to="{ name: feature.routeName }" class="feature-link">
              <span>{{ feature.title }}</span>
            </router-link>
        </li>
      </ul>
    </section>

    <p class="instruction">请选择您需要的功能开始操作吧！</p>
    <div class="code_hub_url">
      <p class="instruction">本站前端后端均已开源可前往gitee平台查看源码或下载</p>
      <br>
      <p style="  font-size: 1rem;color: #999;">前端：
        <span>
          <a href="https://gitee.com/hong-ying-19/honlnk-schedule-vue" target="_blank">honlnk-schedule-vue</a>
        </span>
      </p>
      <p>
        <span style="margin-left: 10px;">
          后端—服务：
          <a href="https://gitee.com/hong-ying-19/honlnk-schedule-springboot"
             target="_blank">honlnk-schedule-springboot</a>
        </span>
      </p>
      <p>
         <span style="margin-left: 10px;">
          后端—排值班表内核：<a href="https://gitee.com/hong-ying-19/honlnk-schedule-flask"
                                target="_blank">honlnk-schedule-flask</a>
        </span>
      </p>

    </div>
  </div>
</template>


<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 考虑减去页眉和页脚的高度 */
  height: 100vh;
  padding: 2rem;
  text-align: center;
  background-color: #f5f7fa;
  user-select: none;
}

.welcome-header {
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.welcome-subtitle {
  font-size: 1.2rem;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.feature-selector {
  width: 80%;
  max-width: 600px;
}

.feature-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.feature-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;


}

.feature-item:hover {
  background-color: #eaeaea;
}

.feature-link {
  color: inherit;
  text-decoration: none;
}

.instruction {
  font-size: 1rem;
  color: #999;
  margin-top: 2rem;
}

.code_hub_url {
  position: fixed;
  bottom: 60px;
  font-size: 1rem;
  color: #999;
}

.code_hub_url a {
  color: #999;
}
</style>